import React, { useState } from "react";
import "./ProjectLog.css";

const Wenan = () => {
  const [expanded, setExpanded] = useState(false);

  const logData = {
    avatar: "../../public/dashboard/user2.png",
    name: "段米丽",
    role: "文案",
    action: "将思维导图任务的状态更新为进行中",
  };

  return (
    <div className="log-container">
      <div className="log-item">
        <div className="user-info">
          <img
            src={logData.avatar}
            alt=""
            className="avatar"
            style={{ marginTop: "-60px" }}
          />
          <div className="user-details">
            <div
              className="name"
              style={{ width: "60px", marginTop: "-50px", marginLeft: "40px" }}
            >
              {logData.name}
            </div>
            <div className="role" style={{ marginLeft: "40px" }}>
              {logData.role}
            </div>
          </div>
        </div>

        <div
          className="action-item"
          style={{
            borderRadius: "10px",
            marginLeft: "-100px",
            marginTop: "50px",
            backgroundColor: "rgb(244, 249, 253)",
            height: "50px",
            width: "290px",
            lineHeight: "50px",
          }}
        >
          <span className="action-icon">🔄</span>
          <span
            className="action-text"
            style={{ fontSize: "14px", height: "30px" }}
          >
            {logData.action}
          </span>
        </div>
      </div>

      <button className="view-more" style={{marginLeft:"100px"}} onClick={() => setExpanded(!expanded)}>
        查看更多{" "}
        <span className={`arrow ${expanded ? "expanded" : ""}`}>▼</span>
      </button>
    </div>
  );
};

export default Wenan;
